<template>
  <view class="bill">
    <view class="top">
      <my-title :title="'酒店-民俗'" @myBack="back"></my-title>
    </view> 
    <view class="home-search">
      <my-search @myToSite="toSite"></my-search>
    </view>
    <view class="btm">
      <view class="titles">
        <block v-for="(item,i) in titles" :key="i">
          <text @click="changeIndex(i)" :class="index == i?'add':''">{{item}}</text>
        </block>
      </view>
      <view class="inform">
        <text style="color: gray;font-size: 14px;font-weight: bold;">以下为一年的订单</text>
        <text style="color: gray;font-size: 12px;">部分订单仅支持查看概要</text>
      </view>
      <view class="bills">
        <block v-for="(item,i) in bills" :key="i">
          <view class="bill">
            <view class="top">
                <view class="left">
                  <uni-icons custom-prefix="iconfont" type="icon-chengche" size="20" color="#99ccff"></uni-icons>
                  <text style="padding-left: 20rpx;">门票</text>
                </view>
                <view class="right">
                  <text>已完成 |</text>
                  <uni-icons type="trash-filled"></uni-icons>
                </view>
            </view>
            <view class="btm" style="font-size: 10px;color: gray;">
              <text style="font-size: 15px;font-weight: bold;color: black;">{{item.text}}</text>
              <text>{{item.time}}</text>
              <text>凭 [二维码] 直接验证入园</text>
              <view class="price">
                <text style="color: red;font-size: 15px;">￥{{item.price}}</text>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        index:0,
        titles: ['全部','待付款','未出行','带点评'],
        bills: [
          {
            text:'西安城墙门票学生票——18:00-22:00如园-入口：城门北口',
            time:'2023-2-1  有效 1份',
            price: 27
          },
          {
            text:'西安城墙门票学生票——18:00-22:00如园-入口：城门北口',
            time:'2023-2-2  有效 2份',
            price: 40
          }
        ]
      };
    },
    methods: {
      changeIndex(i){
        this.index = i
      },
      back() {
        console.log('hotal的自定义事件调用了')
        uni.redirectTo({
          url:'/pages/inform/inform'
        })
      },
    }
  }
</script>

<style lang="scss">
@import "@/static/iconfont.css";
.bill {
  .top {
    background-color: white;
  }
  .home-search {
    background-color: white;
  }
  .btm {
    .titles {
      background-color: white;
      display: flex;
      justify-content: space-around;
      padding-bottom: 10rpx;
      text {
        display: block;
        padding: 4rpx;
      }
      .add {
        color: #1296db;
        border-bottom: 2px solid #1296db;
      }
    }
    .inform {
      text-align: center;
      display: flex;
      flex-direction: column;
      margin: 50rpx;
    }
    .bills {
      padding: 30rpx;
      .bill {
        margin-bottom: 40rpx;
        background-color: white;
        border-radius: 7px;
        .top {
          padding: 20rpx;
          display: flex;
          justify-content: space-between;
        }
        .btm {
          padding: 0 50rpx 20rpx 50rpx;
          display: flex;
          flex-direction: column;
          text {
            padding: 10rpx 0;
          }
          .price {
            text-align: end;
          }
        }
      }
    }
  }
}
</style>
